<route lang="json5">
{
  style: { navigationBarTitleText: '环境获取' },
  enablePullDownRefresh: true,
}
</route>

<template>
  <view>
    <text>测试标签</text>
    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
      <view id="demo1" class="w-full bg-yellow-800 scroll-view-item_H uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item_H bg-red-800 uni-bg-green">B</view>
      <view id="demo3" class="scroll-view-item_H bg-red-800 uni-bg-blue">C</view>
    </scroll-view>
    <scroll-view class="scroll-view_y h-50vh" scroll-y="true" @scroll="scroll" scroll-left="0">
      <view id="demo1" class="w-full h-30rem bg-yellow-800 scroll-view-item_H uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item_H bg-red-800 uni-bg-green">B</view>
      <view id="demo3" class="scroll-view-item_H bg-red-800 uni-bg-blue">C</view>
    </scroll-view>

    <!-- swiper -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="true"
      :autoplay="true"
      :interval="2000"
      :display-multiple-items="2"
      :duration="500"
    >
      <swiper-item>
        <view class="swiper-item uni-bg-red bg-green-200">A</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-green bg-blue-50">B</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item uni-bg-blue bg-yellow-600">C</view>
      </swiper-item>
    </swiper>
  </view>
  <!-- 可拖动区域 -->
  <movable-area class="position-absolute w-full h-100vh z-20 top-0 left-0">
    <movable-view :x="10" :y="20" direction="all" class="bg-red-200 h-4rem w-4rem">
      拖动元素
    </movable-view>
  </movable-area>
  <view class="h-2rem"></view>
  <!-- icon -->
  <icon type="success" :size="23" color="" />
  <icon type="download" :size="23" color="red" />
  <icon type="success_no_circle" :size="23" color="red" />
  <icon type="info" :size="23" color="red" />
  <icon type="warn" :size="23" color="red" />
  <icon type="waiting" :size="23" color="red" />
  <icon type="cancel" :size="23" color="red" />
  <icon type="search" :size="23" color="red" />
  <icon type="clear" :size="23" color="red" />
  <!-- 富文本 -->
  <rich-text :nodes="node"></rich-text>
  <button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息啊啊啊</button>
  <!-- checkbox -->
  <checkbox-group @change="checkListChange">
    <label>
      <checkbox value="1" checked="true" />
      选中
    </label>
    <label>
      <checkbox value="2" />
      未选中
    </label>
  </checkbox-group>
  <!-- 表单 -->
  <form @submit="formSubmit" @reset="formReset">
    <switch @change="changeSwitch" :checked="form.switch" name="switch" />
    <input v-model="form.input" class="uni-input" name="input" placeholder="这是一个输入框" />
    <textarea
      v-model="form.textarea"
      placeholder-style="color:#F76260"
      placeholder="占位符字体是红色的"
    />
  </form>

  <picker-view
    :value="pickData.value"
    :indicator-style="pickData.indicatorStyle"
    @change="bindChange"
    class="picker-view"
    style="height: 300px"
  >
    <picker-view-column>
      <view class="item" v-for="(item, index) in pickData.years" :key="index">{{ item }}年</view>
    </picker-view-column>
    <picker-view-column>
      <view class="item" v-for="(item, index) in pickData.months" :key="index">{{ item }}月</view>
    </picker-view-column>
    <picker-view-column>
      <view class="item" v-for="(item, index) in pickData.days" :key="index">{{ item }}日</view>
    </picker-view-column>
  </picker-view>
  <view class="h-1rem"></view>
</template>
<script lang="ts" setup>
const scroll = (e) => {
  console.log('e', e)
}
onLoad(() => {
  setTimeout(() => {
    console.log('start pulldown')
  }, 1000)
  uni.startPullDownRefresh()
})
const node = ref(
  "<div style='text-align:center;'><img src='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png'/></div>",
)
const form = ref({
  switch: false,
  input: '',
  textarea: 'fsdfsdf',
})
const getUserInfo = (val) => {
  console.log('aAAA', val)
}

const checkListChange = (val) => {
  console.log('checkListChange', val)
}
const pickDatafun = () => {
  const date = new Date()
  const years = []
  const year = date.getFullYear()
  const months = []
  const month = date.getMonth() + 1
  const days = []
  const day = date.getDate()
  for (let i = 1990; i <= date.getFullYear(); i++) {
    years.push(i)
  }
  for (let i = 1; i <= 12; i++) {
    months.push(i)
  }
  for (let i = 1; i <= 31; i++) {
    days.push(i)
  }
  return {
    title: 'picker-view',
    years,
    year,
    months,
    month,
    days,
    day,
    value: [9999, month - 1, day - 1],
    visible: true,
    indicatorStyle: `height: 50px;`,
  }
}
const pickData = pickDatafun()
const formSubmit = () => {
  console.log(form)
}
const changeSwitch = (val) => {
  console.log(val)
  form.value.switch = val.detail.value
}
const formReset = () => {}
const bindChange = (val) => {
  console.log('bindChange', val)
}
</script>
<style scoped lang="scss">
.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}

.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}

.info {
  position: absolute;
  right: 20rpx;
}

.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>
